new Vue({
  el: '#notebook',
  data: {
    notes: [
      {id: 1, title: 'title1' , content: 'this is content1'},
      {id: 2, title: 'title2' , content: 'this is content2'},
    ],
    selectedNote: undefined
  },
  computed: {
    preview: function() {
      return this.selectedNote ? marked(this.selectedNote.content) : ''
    }
  },
  watch: {
    notes: {
      handler: function(val, old) {
        localStorage.setItem('notes', JSON.stringify(this.notes))
      },
      deep: true
    }
  },
  created: function() {
    this.notes = JSON.parse(localStorage.getItem('notes'))
  },
  methods: {
    addNote: function() {
      this.notes.push({
        id: Date.now(),
        title: 'Test Note',
        content: 'test content.'
      })
    },
    selectNote: function(note) {
      this.selectedNote = note
    },
    remoteNote: function() {
      const idx = this.notes.indexOf(this.selectedNote)
      if(idx !== -1) {
        this.notes.splice(idx, 1)
        this.selectedNote = undefined
      }
      
    }
  }
})